import React, { Component } from "react";

/* 实现步骤
1、利用React.createContext() 获取到 Provider,Consumer
2、传入数据 <Provider value="姓为：张">
          <Two></Two>
        </Provider>

3、接受数据
*/

let { Provider, Consumer } = React.createContext();

class One extends Component {
  state = {};
  render() {
    return (
      <div>
        one <br />
        <Provider value="姓为：张">
          <Two></Two>
        </Provider>
      </div>
    );
  }
}

export default One;

class Two extends Component {
  state = {};
  render() {
    return (
      <div>
        Two <br />
        <Three></Three>
      </div>
    );
  }
}

class Three extends Component {
  state = { val: "" };
  valref = React.createRef();
  render() {
    return (
      <div>
        Three <br />
        接受One传入的值：<span id="ab" ref={this.valref}></span>
        <Consumer>
          {(data) => {
            // console.log(data);
            // this.setState({ val: data });
            // this.val = data;
            setTimeout(() => {
              console.log(this.valref);
              this.valref.current.innerHTML = data;
            }, 0);
          }}
        </Consumer>
      </div>
    );
  }
}
